<template>
  <div class="dy-main MyWealthIndex">
    <div class="dy-header">
      <x-header title="我的财富" :left-options="{preventGoBack:true}" @on-click-back="back"></x-header>
    </div>
    <div class="dy-body">
      <div class="total">
        <div class="not-login" v-if="!loginStatus">
          <button>登录查看</button>
          <p>请登录查看您的财富详情</p>
        </div>
        <div class="login" v-if="loginStatus">
          <div class="hd">详情 ></div>
          <div class="md">
            <div class="item">
              <strong>83.333.00</strong>
              <span>总资产(元)</span>
            </div>
            <div class="item">
              <strong>1.234.56</strong>
              <span>历史收益</span>
            </div>
          </div>
          <div class="bd">
            <p>数据更新于2018年6月22日</p>
          </div>
        </div>
      </div>
      <tab active-color="#f28300" bar-active-color="#f28300" class="tab-select">
        <tab-item :selected="tabSelected === '1'" @click.native="tabSelected = '1'">持仓分析</tab-item>
        <tab-item :selected="tabSelected === '2'" @click.native="tabSelected = '2'">交易查询</tab-item>
      </tab>
      <div class="tabContent" v-show="tabSelected === '1'">
        <div class="e-chart-map">
          <div class="dy-wapper">
            <div class="zx-charts">
              <div id="myChart" :style="{width: '100%', height: '4rem'}"></div>
            </div>
          </div>
        </div>
        <div class="charts-data-wrap">
          <div class="data-box" v-for="(item, index) in chartsData" :key="index">
            <h3><i :style="`background-color: ${item.color}`"></i>{{item.name}}</h3>
            <div class="txt">
              <span class="money">{{item.money}}</span>
              <span class="change">{{item.change}}</span>
            </div>
          </div>
        </div>
        <div class="prd-list">
          <div class="item">
            <div class="data-head">
              <h3>猜你喜欢</h3>
              <!--<span>更多</span>-->
            </div>
            <div class="data-box" v-for="(tagLists, index) in prdInfo" :key="index" @click="gotoDetail(index)">
              <div class="left-info">
                <div class="rate">{{ tagLists.rate }}</div>
                <div class="rate-msg">{{ tagLists.rateMsg }}</div>
              </div>
              <div class="center-info">
                <div class="prd-name">{{ tagLists.prdName }}</div>
                <div class="tag" v-for="(tag, index) in tagLists.tagList" :key="index">{{ tag }}</div>
                <div class="tag red" v-if="parseInt(tagLists.soldVol)/parseInt(tagLists.totalVol) >= 0.9">额度紧张</div>
              </div>
              <div class="right-icon">
                <img class="icon-img" src="../../../../assets/img/Financial/zunxiang.png" v-if="tagLists.icon === '1'">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tabContent" v-show="tabSelected === '2'">
        <group gutter="0">
          <cell v-for="(item, index) in tranData" :key="index" :title="item.name" is-link @click.native="goDetail">
            <div slot="inline-desc" class="tran-slot-content">
              <div class="item">
                <h3>{{item.money}}</h3>
                <span>交易金额</span>
              </div>
              <div class="item">
                <p>{{item.date}}</p>
                <span>交易日期</span>
              </div>
            </div>
          </cell>
        </group>
      </div>
    </div>
    <!--<div class="dy-footer"></div>-->
  </div>
</template>
<script>
export default {
  data () {
    return {
      loginStatus: true,
      iconArray: ['活期+', '定期+', '结构化', '基金', '资产管理', '保险', '预留', '预留'],
      tabSelected: '1',
      echartOption: {
        tooltip: {
          show: false,
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          data: ['活期+', '定期+', '结构化', '基金', '资产管理', '保险']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '80%'],
            avoidLabelOverlap: false,
            center: ['30%', '50%'],
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '16'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {value: 120, name: '活期+', itemStyle: {color: '#f23e00'}},
              {value: 120, name: '定期+', itemStyle: {color: '#f28300'}},
              {value: 120, name: '结构化', itemStyle: {color: '#46d6ec'}},
              {value: 150, name: '基金', itemStyle: {color: '#6695ff'}},
              {value: 150, name: '资产管理', itemStyle: {color: '#fe6b40'}},
              {value: 130, name: '保险', itemStyle: {color: '#1bd299'}}
            ]
          }
        ]
      },
      chartsData: [{
        name: '活期+',
        money: '27.637.00元',
        change: '+1.34元',
        color: '#f23e00'
      }, {
        name: '定期+',
        money: '50.000.00元',
        change: '+1.34元',
        color: '#f28300'
      }, {
        name: '结构化',
        money: '2.345.34元',
        change: '',
        color: '#46d6ec'
      }, {
        name: '基金',
        money: '100.000.00元',
        change: '+1.34元',
        color: '#6695ff'
      }, {
        name: '资产管理',
        money: '27.637.00元',
        change: '-15.34元',
        color: '#fe6b40'
      }, {
        name: '保险',
        money: '0.00元',
        change: '',
        color: '#1bd299'
      }],
      prdInfo: [{
        rate: '4.01%',
        rateMsg: '七日年化',
        prdName: 'IXA汇添赢',
        tagList: ['T+1到账', '5元起购'],
        totalVol: '100000',
        soldVol: '91000',
        icon: '0'
      }, {
        rate: '4.01%',
        rateMsg: '七日年化',
        prdName: 'IXA汇添赢',
        tagList: ['T+1到账', '5元起购'],
        totalVol: '100000',
        soldVol: '1000',
        icon: '1'
      }],
      tranData: [{
        name: '交银添利A(T456643424243)',
        money: '50.000.00元',
        date: '2018-04-29'
      }, {
        name: '交银添利B(T556643424249)',
        money: '60.000.00元',
        date: '2018-04-28'
      }]
    }
  },
  computed: {
    getCurrentPlusInfo () {
      return this.$store.getters.getCurrentPlusInfo
    },
    myChart () {
      return this.$echarts.init(document.getElementById('myChart'))
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    drawLine () {
      this.myChart.setOption(this.echartOption)
      this.myChart.resize()
    },
    goDetail () {
      console.log('wwwwwwwwwwwwww')
      this.$router.push({'name': 'MyWealthTranDetail'})
    }
  },
  mounted () {
    this.drawLine()
  }
}
</script>
<style lang="less">
  .MyWealthIndex {
    .dy-body {
      position: relative;
      overflow: auto;
      .total {
        width: 100%;
        height: 3.12rem;
        background: url('../../../../../static/img/main-top-bg.png') no-repeat;
        background-size: 100%;
        text-align: center;
        .not-login {
          button {
            margin-top: .8rem;
            width: 2.4rem;
            height: .8rem;
            border: .02rem solid #fff;
            font-size: .32rem;
            color: #fff;
            border-radius: .2rem;
          }
          p {
            margin-top: .4rem;
            line-height: .36rem;
            color: #fff;
          }
        }
        .login {
          padding: .25rem .14rem .3rem;
          .hd {
            padding: .1rem .14rem .35rem;
            text-align: right;
            color: #fff;
          }
          .md {
            display: flex;
            .item {
              flex: 1;
              padding: 0 .16rem;
              border-right: 1px solid #fff;
              color: #fff;
              strong {
                display: block;
                font-weight: normal;
                font-size: .48rem;
              }
              span {
                display: block;
                margin-top: .05rem;
              }
            }
            :last-child {
              border-right: 0 none;
            }
          }
          .bd {
            margin-top: .3rem;
            font-size: .24rem;
            color: #fff;
          }
        }
      }
      .e-chart-map {
        position: relative;
        margin-top: -.02rem;
      }
      .charts-data-wrap {
        border-top: .01rem solid #d9d9d9;
        border-bottom: .01rem solid #d9d9d9;
        background-color: #fff;
        overflow: hidden;
        .data-box {
          float: left;
          width: 50%;
          padding: .3rem;
          border-bottom: .01rem solid #d9d9d9;
          h3 {
            margin-bottom: .1rem;
            font-size: .32rem;
            font-weight: bold;
            i {
              display: inline-block;
              width: .2rem;
              height: .2rem;
              margin-right: .1rem;
            }
          }
          .txt {
            display: flex;
            justify-content: space-between;
            span {
              font-size: .26rem;
            }
          }
          &:nth-child(2n+1) {
            border-right: .01rem solid #d9d9d9;
          }
        }
      }
      .prd-list{
        padding-bottom: .3rem;
        .data-head {
          display: flex;
          justify-content: space-between;
          padding: .35rem .3rem .2rem;
        }
        .data-box{
          display: flex;
          margin-bottom: 1px;
          height: 1.5rem;
          background: #fff;
          .left-info{
            padding: 0.3rem 0.3rem 0;
            .rate{
              padding-bottom: 0.1rem;
              font-weight: bolder;
              font-size: 0.4rem;
              color: #F23E00;
            }
            .rate-msg{
              font-size: 0.26rem;
              color: #999999;
            }
          }
          .center-info{
            display: flex;
            padding-left: 0.2rem;
            width: 60%;
            flex-wrap: wrap;
            .prd-name{
              padding-top: 0.2rem;
              width: 100%;
            }
            .tag{
              padding: 0 0.1rem;
              margin-right: 0.1rem;
              border: 1px solid #999999;
              border-radius: 0.06rem;
              font-size: 0.24rem;
              height: 0.4rem;
              line-height: 0.4rem;
            }
            .red{
              color: #F23E00;
            }
          }
          .right-icon{
            .icon-img{
              height: 1rem;
              width: 1rem;
            }
          }
        }
      }
      .tran-slot-content {
        display: flex;
        .item {
          flex: 1;
          h3 {
            padding: .3rem 0 .1rem;
            color: #f23e00
          }
          p {
            padding: .3rem 0 .1rem;
          }
        }
      }
    }
  }
</style>
